//生产总览组件(测试阶段)
import React, { Component } from "react";
import { connect } from "dva";
import {
    List,
    Tabs,
    WhiteSpace,
    NavBar,
    Icon,
    Card,
    TabBar,
    ListView,
    Button,
    DatePicker,
    Picker,
    WingBlank
} from "antd-mobile";
import { StickyContainer, Sticky } from "react-sticky";
import styles from "./EnvDay.less";
import "antd-mobile/dist/antd-mobile.css";

import { getThisDayAlarmApp } from "../../../services/remove";
import moment from "moment";
import PublicService from "../../../services/PublicService";
import enUs from "antd-mobile/lib/date-picker/locale/en_US";




const colors = [[
    {
      label:'全部',
      value: '0',
    },
    {
        label:'00-08',
        value: '1',
      },
      {
        label:'08-16',
        value: '2',
      },
      {
        label:'16-24',
        value: '3',
      }
    
  ]];
  

class EnvDay extends Component {
    constructor(props) {
        super(props);
        const dataSource = new ListView.DataSource({
            rowHasChanged: (row1, row2) => row1 !== row2
        });

        this.state = {
            visible: false,
            pickerValue: [],
            pickerValue1: [],
            date: null,
            dataSource,
            isLoading: true,
            echarts: [],
            data: [],
            sValue:[],
            pickerValuetext:"",
            sValuetext:"0",
            rows:10
        };
    }

    onEndReached = event => {
        // load new data
        // hasMore: from backend data, indicates whether it is the last page, here is false
        if (this.state.isLoading && !this.state.hasMore) {
            return;
        }
        this.setState({
            rows:this.state.rows+10
        })
        let data = {
            typeCode:"",
            typeTime:this.state.sValuetext,
            page:"1",
            rows:this.state.rows
           
         }
         getThisDayAlarmApp({...data}).then(data => {
             console.log(data)
             this.setState({
                 data:data.data.ret.items,
               
             })
             setTimeout(() => {
                 this.setState({
                   dataSource: this.state.dataSource.cloneWithRows(data.data.ret.items),
                   isLoading: false,
                 });
               }, 600);
         })
      
        this.setState({ isLoading: true });
        setTimeout(() => {
            this.setState({
                dataSource: this.state.dataSource.cloneWithRows(this.state.data),
                isLoading: false
            });
        }, 1000);
    };

    //页面进入事件
    componentDidMount () {
        let data = {
           typeCode:"",
           typeTime:'0',
           page:"1",
           rows:"10"
          
        }
        getThisDayAlarmApp({...data}).then(data => {
            console.log(data)
            this.setState({
                data:data.data.ret.items,
              
            })
            setTimeout(() => {
            
              
                this.setState({
                  dataSource: this.state.dataSource.cloneWithRows(data.data.ret.items),
                  isLoading: false,
                });
              }, 600);
        })
        
      
        
    }
    //点击详情事件
    save = (id,time,name) => {
        console.log(id);
        PublicService.setCookie("takeTime",moment(time).format("YYYY-MM-DD HH:mm:ss"));
        PublicService.setCookie("cordName",name);
        PublicService.setCookie("ProdetailsId",id);
        this.props.history.push("/EnvDetails");
    };

    //选择器事件

    saveon = (v,value) => {
      
        this.setState({
            pickerValue:value,
            visible:false,
            pickerValuetext:value[0],
            data:[]
        })

        setTimeout(() => {
            let data = {
                typeCode:value[0],
                typeTime:this.state.sValuetext,
                page:1,
                rows:10
               
             }
             getThisDayAlarmApp({...data}).then(data => {
             
                 this.setState({
                     data:data.data.ret.items,
                   
                 })
             })
             setTimeout(() => {
               
                 this.setState({
                   dataSource: this.state.dataSource.cloneWithRows(this.state.data),
                   isLoading: false,
                 });
               }, 600);
        })
    }

    saveon1 = (v,value) => {
     
        this.setState({
            sValue:value,
            visible:false,
            sValuetext:value[0],
            data:[]
        })

    
            let data = {
                typeCode:this.state.pickerValuetext,
                typeTime:value[0],
                page:1,
                rows:10
               
             }
             getThisDayAlarmApp({...data}).then(data => {
                
                 this.setState({
                     data:data.data.ret.items,
                   
                 })
             })
             setTimeout(() => {
              
                 this.setState({
                   dataSource: this.state.dataSource.cloneWithRows(this.state.data),
                   isLoading: false,
                 });
               }, 600);
      
    }


    render() {
     
        
const seasons= [[
    {
        value: "co",
        label: "一氧化碳"
    },
    {
        value: "pl",
        label: "颗粒物"
    }, {
        value: "nox",
        label: "氮氧化物"
    }, {
        value: "hcl",
        label: "氯化氢"
    }, {
        value: "waterTreatment",
        label: "水处理量"
    }, {
        value: "cod",
        label: "COD"
    }, {
        value: "ph",
        label: "pH值"
    }
]]


        const { data } = this.state;

        const separator = (sectionID, rowID) => (
            <div
                key={`${sectionID}-${rowID}`}
                style={{
                    backgroundColor: "#F5F5F9",
                    height: 8,
                    borderTop: "1px solid #ECECED",
                    borderBottom: "1px solid #ECECED"
                }}
            />
        );
        let index = 0;
        const row = (rowData, sectionID, rowID) => {
            if (index < 0) {
                index = data.length - 1;
            }
            const obj = data[index++];
            return (
                <div key={rowID} style={{ borderBottom:"1px solid rgb(238, 230, 230)" ,padding:"5px 0px"}}>
                    <div
                        style={{
                          
                            color: "#888",
                            fontSize: 14,
                           
                           
                        }}
                    >
                        {obj ? obj.typeName : ""}
                    </div>
                    <div
                        style={{
                            display: "-webkit-box",
                            display: "flex",
                            padding: "5px 0",
                           
                            borderRadius: "15px"
                        }}
                    >
                        <div
                            className={styles.list_left}
                            style={{ padding: "5 5" }}
                        >
                           
                            <p className={styles.list_bp}>
                                {obj
                                    ? moment(obj.createTime).format(
                                          "YYYY-MM-DD HH:mm"
                                      )
                                    : ""}
                            </p>
                            <Button
                                type="ghost"
                                style={{
                                    height: 20,
                                    fontSize: 12,
                                    lineHeight: 1.5,
                                    width: 50,
                                    position: "absolute",
                                    right: 14,
                                    top: -14
                                }}
                                onClick={this.save.bind(this, obj?obj.id:9,obj?obj.createTime:null,obj?obj.typeName:"")}
                            >
                                详情
                            </Button>
                        </div>
                    </div>
                </div>
            );

        };
      
        return (
            <WingBlank>
                  <WhiteSpace />
            <div className={styles.containerTop}>
                
                <WhiteSpace />

 
                <Picker
             
               visible={this.state.visible}
               data={seasons}
               cascade={false}
               value={this.state.pickerValue}
               onChange={this.saveon.bind(this,'pickerValue')}
               onOk={this.saveon.bind(this,'pickerValue')}
               onDismiss={() => this.setState({ visible: false })}
                >
                    <List.Item onClick={() => this.setState({ visible: true })}>
                        环保指标
                    </List.Item>
                </Picker>
                <WhiteSpace style={{borderBottom:"1px solid rgba(175, 186, 236, 0.43)",marginLeft:'15px',marginRight:'15px'}}/>
                <Picker
                data={colors}
                cascade={false}
                value={this.state.sValue}
                onChange={this.saveon1.bind(this,'pickerValue')}
               onOk={this.saveon1.bind(this,'pickerValue')}
               onDismiss={() => this.setState({ visible: false })}
                >
                <List.Item >报警时段</List.Item>
                </Picker>
                </div>
                <WhiteSpace />
                <div className={styles.boxBottom}>
            <ListView
        ref={el => this.lv = el}
        dataSource={this.state.dataSource}
        renderHeader={() => <span>点位名称/时间</span>}
        renderFooter={() => (<div style={{ padding: 30, textAlign: 'center' }}>
          {this.state.isLoading ? 'Loading...' : 'Loaded'}
        </div>)}
        renderRow={row}
      
        className="am-list"
        pageSize={4}
        useBodyScroll
     
        scrollRenderAheadDistance={500}
        onEndReached={this.onEndReached}
        onEndReachedThreshold={10}
      />
      </div>
            
            </WingBlank>
        );
    }
}
function mapStateToProps(state) {
    return {};
}
export default connect()(EnvDay);
